<template>
  <div>
    <div class="flex justify-between">
      
      <div class="title">
        <slot name="prepend" />
        <h1 class="text-xl font-bold leading-xl">
          <slot> </slot>
        </h1>
      </div>

      <div class="title">
        <slot name="rightButtons" />
      </div>

    </div>



    <div class="flex items-center mb-1" v-if="$slots.buttons">
      <slot name="buttons" />
    </div>


    <span class="subtitle">
      <slot name="subtitle">    
      </slot>
    </span>    

    <hr class="border-divider mb-4" v-if="hasHr"/>
  </div>
</template>

<script setup>
import { defineProps, defineOptions } from 'vue'
defineOptions({
  name: 'PageTitle'
});
const props = defineProps({
  hasHr:{
    type: Boolean,
    default: true
  }
});
const { hasHr } = props;
</script>

<style scoped>
.title {
  @apply flex items-center;
  height: 50px;
}

.subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}
</style>
